<template>
  <el-card
    class="searchForm"
    :body-style="{
      display: 'flex',
      'justify-content': 'space-between',
      'align-items': 'center'
    }"
  >
    <el-button
      type="primary"
      @click="handleAdd"
    >
      新增
    </el-button>
    <div>
      <el-input
        v-model="value"
        placeholder="请输入内容"
        class="searchInput"
        @input="handleInput"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button
            :icon="Search"
            @click="handleSearch"
          />
        </template>
      </el-input>
      <el-button
        class="clear"
        @click="handleClear"
      >
        重置
      </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const props = defineProps({
  filter: {
    type: String,
    required: true
  }
})

interface EmitsType {
  (e: 'update:filter', filter: string):void
  (e: 'handleSearch', filter: string): void
  (e: 'handleClear'): void
  (e: 'handleAdd') : void
}
const emit = defineEmits<EmitsType>()

const value = ref(props.filter)

watch(() => props.filter, (newValue) => {
  value.value = newValue
})

const handleInput = (value:string) => {
  emit('update:filter', value)
}
const handleClear = () => {
  emit('handleClear')
}
const handleSearch = () => {
  emit('handleSearch', value.value)
}
const handleAdd = () => {
  emit('handleAdd')
}
</script>

<style scoped lang="scss">
.searchForm{
  margin-bottom: 10px;
  .searchInput {
    width: 240px;
  }
  .clear {
    margin-left: 10px;
  }

}
</style>
